<template>
  <el-dialog
    :title="title"
    :visible.sync="showChild"
    :before-close="beforeClose"
    :close-on-click-modal="false"
  >
    <div class="form-container">
      <el-form :model="department" ref="form" label-width="92px" :rules="rules">
        <el-form-item label="所属父部门">
          <el-select v-model="tempParentId" @change="handParentChange">
            <el-option label="无" :value="baseSortIndex"></el-option>
            <el-option v-for="(par,index) in parentList" :key="index" :label="par.name" :value="par.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="departmentName" label="部门名称">
          <el-input v-model.trim="department.departmentName" placeholder=""></el-input>
        </el-form-item>
        <el-form-item prop="remark" label="备注">
          <el-input v-model.trim="department.remark" type="textarea" :rows="5" placeholder=""></el-input>
        </el-form-item>
        <el-form-item prop="sortIndex" label="序号">
          <el-input-number v-model="department.sortIndex" @change="handSortIndexChange" :min="1"
                           :max="99"></el-input-number>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer">

      <el-button type="default" @click="close">取 消</el-button>
      <el-button type="danger" @click="resetForm('form')">重 置</el-button>
      <el-button type="success" @click="submitForm('form')" :loading="changeLoading">保 存</el-button>

      <!--ED4014-->
    </div>
  </el-dialog>
</template>

<script>
  import departmentAPI from '@/api/system/department'

  export default {
    name: "departmentCommon",
    data() {
      return {
        department: {
          departmentId: '',
          departmentName: '',
          sortIndex: 1,
          parentId: '0',
          remark: '',
          children: ''
        },
        rules: {
          departmentName: [
            {required: true, message: '请输入部门名称', trigger: 'blur'}
          ]
        },
        parentList: [],
        showChild: false,
        title: '新增部门',
        baseSortIndex: '',
        changeLoading:false,
        tempParentId:''
      }
    },
    created() {
      this.getParentList()
    },
    methods: {
      close(){
        this.resetForm('form')
        this.showChild = false
      },
      beforeClose(done){
        this.resetForm('form')
        done(true)
      },
      handSortIndexChange() {

      },

      handParentChange(val) {
        this.department.sortIndex = this.getSortIndex(val)
      },
      getId(val) {
        return val.substring(0, val.indexOf('-'))
      },
      getSortIndex(val) {
        return val.substring(val.indexOf('-') + 1)
      },

      saveOrUpdate() {
        this.changeLoading = true
        this.department.parentId = this.getId(this.tempParentId)
        const promise = this.department.departmentId ? departmentAPI.update(this.department) : departmentAPI.save(this.department)
        promise.then(res => {
          this.changeLoading = false
          this.$emit('update')
          this.showChild = false
          this.resetForm('form')
        })

      },
      getInfo(id) {
        departmentAPI.getById(id).then(res => {
          this.department = res
          const parentId = this.parentList.find((val)=>{
            return val.id.startsWith(this.department.parentId)
          })
          this.tempParentId = parentId ? parentId : this.baseSortIndex
        }).catch(err => {
          console.log(err)
        })
      },
      open(id) {
        this.getParentList()
        this.showChild = true
        this.department.departmentId = id
        if (id) {
          this.title = '编辑部门'
          this.getInfo(id)
        } else {
          this.title = '新增部门'
        }
      },
      getParentList() {
        departmentAPI.getList().then(res => {
          console.log(res)
          this.parentList = []
          let arr = res.result
          for (let el of arr) {
            console.log(el)
            if (el.parentId === 0) {
              let sortIndex = 1
              if (el.children.length) {
                sortIndex = el.children.length + 1
              }

              const obj = {
                id: el.departmentId + '-' + sortIndex,
                name: el.departmentName
              }
              this.parentList.push(obj)
            }
          }
          this.baseSortIndex = 0 + '-' + parseInt(arr.length + 1)
          this.department.sortIndex = arr.length + 1
          this.tempParentId = this.baseSortIndex
        }).catch(err => {
          console.log(err)
        })
      },
      resetForm(form){
        this.$refs[form].resetFields()
        this.tempParentId = this.baseSortIndex
      },
      submitForm(form){
        this.$refs[form].validate(valid => {
          if (valid && !this.changeLoading) {
            this.saveOrUpdate()
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">

</style>
